<!DOCTYPE html>
<html>
  <head>
    <title>login.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html" charset="UTF-8">
	
	<!-- 独立JS -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js" charset="utf-8"></script>
  
  </head>
  
  <body>
<div>
	<div style="float:left;width:40%">
 	<p>请选择你是谁：</p>
  	<select id="selectName" onchange="sendAloneUser();">
  	<option value="1">请选择</option>
  	<option value="ALong">ALong</option>
  	<option value="AKan">AKan</option>
  	<option value="AYuan">AYuan</option>
  	<option value="ALai">ALai</option>
  	<option value="ASheng">ASheng</option>
  	</select>
	<div class="chatWindow">
	<p style="color:darkgrey">群聊：</p>
	<section id="chatRecord" class="chatRecord">
	<p id="titleval" style="color:#CD2626;"></p>
	</section>
	<section class="sendWindow">
	<textarea name="sendChatValue" id="sendChatValue" class="sendChatValue"></textarea>
	<input type="button" name="sendMessage" id="sendMessage" class="sendMessage" onclick="sendMassMessage()" value="发送">
	</section>
	</div>
	</div>
	<div style="float:right; width:40%">
	<p>请选择你要发给谁：</p>
  	<select id="selectName2">
  	<option value="1">请选择</option>
  	<option value="ALong">ALong</option>
  	<option value="AKan">AKan</option>
  	<option value="AYuan">AYuan</option>
  	<option value="ALai">ALai</option>
  	<option value="ASheng">ASheng</option>
  	</select>
	<div class="chatWindow">
	<p style="color:darkgrey">单独聊：</p>
	<section id="chatRecord2" class="chatRecord">
	<p id="titleval" style="color:#CD2626;"></p>
	</section>
	<section class="sendWindow">
	<textarea name="sendChatValue2" id="sendChatValue2" class="sendChatValue"></textarea>
	<input type="button" name="sendMessage" id="sendMessage" class="sendMessage" onclick="sendAloneMessage()" value="发送">
	</section>
	</div>
	</div>
</div>	
    <!-- 独立JS -->
	<script type="text/javascript" charset="utf-8">
	var stompClient = null;
	
	//加载完浏览器后  调用connect（），打开双通道
	$(function(){	
		//打开双通道
		connect()
	})
	
	//强制关闭浏览器  调用websocket.close（）,进行正常关闭
    window.onunload = function() {
    	disconnect()
    }
 
	//打开双通道
    function connect(){
        var socket = new SockJS('http://127.0.0.1:8080/endMessage'); //连接SockJS的endpoint名称为"endpointAric"
        stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
        stompClient.connect({},function(frame){//连接WebSocket服务端
         
            console.log('Connected:' + frame);           
            //广播接收信息
            stompTopic();
            
        });
    }
 
    //关闭双通道
    function disconnect(){
        if(stompClient != null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }
 
    //广播（一对多）
    function stompTopic(){
        //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息（广播接收信息）
        stompClient.subscribe('/mass/getResponse',function(response){  
        	var message=JSON.parse(response.body);          	
        	//展示广播的接收的内容接收
        	 var response = $("#chatRecord");
             response.append("<p><span>"+message.name+":</span><span>"+message.chatValue+"</span></p>");              	
        });
    } 
    
    //列队（一对一）
    function stompQueue(){
    
    	var userId=$("#selectName").val();
    	alert("监听:"+userId)
        //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息（队列接收信息）
    	stompClient.subscribe('/user/' + userId + '/alone/getResponse',function(response){
        	var message=JSON.parse(response.body); 
        	//展示一对一的接收的内容接收
        	 var response = $("#chatRecord2");
             response.append("<p><span>"+message.name+":</span><span>"+message.chatValue+"</span></p>");                 	
        });
    } 
    
    //选择发送给谁的时候触发连接服务器
    function sendAloneUser(){
    	stompQueue();
    }
    
    //群发
    function sendMassMessage(){
    	var postValue={};
    	var chatValue=$("#sendChatValue");
    	var userName=$("#selectName").val();
    	postValue.name=userName;
    	postValue.chatValue=chatValue.val();
    	if(userName==1||userName==null){
    		alert("请选择你是谁！");
    		return;
    	}
    	if(chatValue==""||userName==null){
    		alert("不能发送空消息！");
    		return;
    	}
    	stompClient.send("/massRequest",{},JSON.stringify(postValue));  
    	chatValue.val("");
    }
    //单独发
    function sendAloneMessage(){
    	var postValue={};
    	var chatValue=$("#sendChatValue2");
    	var userName=$("#selectName").val();
    	var sendToId=$("#selectName2").val();
    	var response = $("#chatRecord2");
    	postValue.name=userName;
    	postValue.chatValue=chatValue.val();
    	postValue.userId=sendToId;
    	if(userName==1||userName==null){
    		alert("请选择你是谁！");
    		return;
    	}
    	if(sendToId==1||sendToId==null){
    		alert("请选择你要发给谁！");
    		return;
    	}
    	if(chatValue==""||userName==null){
    		alert("不能发送空消息！");
    		return;
    	}
    	stompClient.send("/aloneRequest",{},JSON.stringify(postValue));  
    	response.append("<p><span>"+userName+":</span><span>"+chatValue.val()+"</span></p>");
    	chatValue.val("");
    }	
	</script>	
	<style>
	
	.chatWindow{
 
	width: 100%;
	height: 500px;
	border: 1px solid blue;
}
.chatRecord{
	width: 100%;
	height: 400px;
	border-bottom: 1px solid blue;
	line-height:20px;
	overflow:auto;
	overflow-x:hidden;
}
.sendWindow{
	width: 100%;
	height: 200px;
}
.sendChatValue{
	
	width: 90%;
	height: 40px;
	
}

	</style>
  </body>
</html>
	